<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="提交信息" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="merchant-submits-apply">
			<view class="merchant-submits-applys">
				<view class="merchant-submits-apply-bottom">
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">商家编号</text>
						<view class="merchant-submits-apply-info-input-one">
							<text>{{ obj.id }}</text>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">公司名称</text>
						<view class="merchant-submits-apply-info-input-one">
							<text>{{ obj.companyName }}</text>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">店铺名称</text>
						<view class="merchant-submits-apply-info-input-one">
							<text>{{ obj.storeName }}</text>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">联系电话</text>
						<view class="merchant-submits-apply-info-input-one">
							<text>{{ obj.phone }}</text>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">法人身份证照片(左侧为正面, 右侧为反面)</text>
						<view class="merchant-submits-apply-info-input-file">
							<view v-if="!sfz_z" @click="onClickUploadF_Z" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>点击上传身份证正面</text>
								</view>
							</view>
							<view v-if="sfz_z" @click="onClickUploadF_Z" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<image mode="aspectFill" class="up-img" :src="sfz_z"></image>
									<image @click.stop="sfz_z = ''" :src="commonImg('close.png')" class="up-img-close" mode=""></image>
								</view>
							</view>
							<view v-if="!sfz_f" @click="onClickUploadF_F" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>点击上传身份证反面</text>
								</view>
							</view>
							<view v-if="sfz_f" @click="onClickUploadF_F" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<image mode="aspectFill" class="up-img" :src="sfz_f"></image>
									<image @click.stop="sfz_f = ''" :src="commonImg('close.png')" class="up-img-close" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">邮箱</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="obj.email" placeholder="请输入邮箱" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view @click="obj.email = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">营业执照照片</text>
						<view class="merchant-submits-apply-info-input-file">
							<view v-if="!yyzz" @click="onClickUploadYYZZ" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>点击上传营业执照</text>
								</view>
							</view>
							<view v-if="yyzz" @click="onClickUploadYYZZ" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<image class="up-img" mode="aspectFill" :src="yyzz"></image>
									<image @click.stop="yyzz = ''" :src="commonImg('close.png')" class="up-img-close" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">身份证号码</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="obj.idCard" placeholder="请输入身份证号码" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view @click="obj.idCard = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">门头照照片</text>
						<view class="merchant-submits-apply-info-input-file">
							<view v-if="!mtzzp" @click="onClickUploadmtzzp" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>门头照照片</text>
								</view>
							</view>
							<view v-if="mtzzp" @click="onClickUploadmtzzp" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<image class="up-img" mode="aspectFill" :src="mtzzp"></image>
									<image @click.stop="mtzzp = ''" :src="commonImg('close.png')" class="up-img-close" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">店内照片</text>
						<view class="merchant-submits-apply-info-input-file">
							<block v-if="dnzp.length" v-for="(item, index) of dnzp" :key="index">
								<view @tap="onClickUploadDNZP(index)" class="merchant-submits-apply-info-input-file-box">
									<view class="up">
										<image class="up-img" mode="aspectFill" :src="item"></image>
										<image @click.stop="dnzp.splice(index, 1) " :src="commonImg('close.png')" class="up-img-close" mode=""></image>
									</view>
								</view>
							</block>
							<view v-if="dnzp.length < 9" @tap="onClickUploadDNZP(9999)" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>点击上传店内照片</text>
								</view>
							</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">行业许可证（餐饮许可证/酒店卫生许可证）</text>
						<view class="merchant-submits-apply-info-input-file">
							<view v-if="!xkz" @click="onClickUploadxkz('1111')" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<view class="upImg"></view>
									<text>点击上传行业许可证</text>
								</view>
							</view>
							<view v-if="xkz" @click="onClickUploadxkz" class="merchant-submits-apply-info-input-file-box">
								<view class="up">
									<image class="up-img" mode="aspectFill" :src="xkz"></image>
									<image @click.stop="xkz = ''" :src="commonImg('close.png')" class="up-img-close" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="onClickSaveSubmit" class="merchant-submits-apply-btn">提交</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				id: '',
				obj: {},
				sfz_z: '', // 身份证正面
				sfz_f: '', // 身份证反面
				yyzz: '', // 营业执照
				mtzzp: '', // 门头照照片
				dnzp: [], // 店内照片
				xkz: '', // 许可证
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			// 许可证
			onClickUploadxkz() {
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									this.xkz = data
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
									this.xkz = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			// 店内照片
			onClickUploadDNZP(hi) { // 9999是最后的那个
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})

									if (hi === 9999) {
										this.dnzp.push(data)
									} else {
										this.dnzp[hi] = data
										this.$set(this.dnzp, hi, data);
									}
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			// 门头照照片
			onClickUploadmtzzp() {
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									this.mtzzp = data
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
									this.mtzzp = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			// 上传营业执照
			onClickUploadYYZZ() {
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									this.yyzz = data
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
									this.yyzz = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			// 身份证反面
			onClickUploadF_F() {
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									this.sfz_f = data
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
									this.sfz_f = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			// 身份证正面
			onClickUploadF_Z() {
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: ((res_o) => {
						const tempFilePaths = res_o.tempFilePaths
						uni.uploadFile({
							url: config.api_base_url_tools + 'oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: ((res_t) => {
								const result = JSON.parse(res_t.data)
								let { status, data } = result
								if (status.flag === true) {
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									})
									this.sfz_z = data
								} else {
									uni.showToast({
										icon: 'none',
										title: status.msg
									})
									this.sfz_z = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						})
					})
				});
			},
			_getCurrentPageData() {
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: `${config.api_base_url}member/merchant_apply/${this.id}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							if (!data.id) {
								data.id = ''
							}
							if (!data.companyName) {
								data.companyName = ''
							}
							if (!data.storeName) {
								data.storeName = ''
							}
							if (!data.phone) {
								data.phone = ''
							}
							if (!data.email) {
								data.email = ''
							}
							if (!data.idCard) {
								data.idCard = ''
							}
							this.obj = data
							if (this.obj.idCardFront) {
								this.sfz_z = this.obj.idCardFront
							}
							if (this.obj.idCardBack) {
								this.sfz_f = this.obj.idCardBack
							}
							if (this.obj.industryLicenseImg) {
								this.xkz = this.obj.industryLicenseImg
							}
							if (this.obj.images) {
								const images = JSON.parse(this.obj.images)
								const dnzp = []
								for (const index in images) {
									dnzp.push(config.my_img_url + '/' + images[index])
								}
								this.dnzp = dnzp
							}
							if (this.obj.coverImage) {
								this.mtzzp = this.obj.coverImage
							}
							if (this.obj.businessLicenseImg) {
								this.yyzz = this.obj.businessLicenseImg
							}
						} else {
							this.obj = {
								id: '',
								companyName: '',
								storeName: '',
								phone: '',
								email: '',
								idCard: ''
							}
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			},
			onClickSaveSubmit() {
				const newObj = {}
				if (!this.obj.email) {
					uni.showToast({
						icon: 'none',
						title: '请填写邮箱'
					})
					return false
				}
				if (!this.obj.idCard) {
					uni.showToast({
						icon: 'none',
						title: '请填写身份证号码'
					})
					return false
				}
				if (!this.sfz_z) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面'
					})
					return false
				}
				if (!this.sfz_f) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证反面'
					})
					return false
				}
				if (!this.yyzz) {
					uni.showToast({
						icon: 'none',
						title: '请上传营业执照'
					})
					return false
				}
				if (!this.mtzzp) {
					uni.showToast({
						icon: 'none',
						title: '请上传门头照照片'
					})
					return false
				}
				if (!this.dnzp.length) {
					uni.showToast({
						icon: 'none',
						title: '请上传店内照片'
					})
					return false
				}
				if (!this.xkz.length) {
					uni.showToast({
						icon: 'none',
						title: '请上传行业许可证照片'
					})
					return false
				}
				uni.showLoading({
					title: '保存中'
				})
				newObj.email = this.obj.email
				newObj.idCard = this.obj.idCard
				newObj.idCardBack = this.sfz_z
				newObj.idCardFront = this.sfz_f
				newObj.businessLicenseImg = this.yyzz
				newObj.coverImage = this.mtzzp
				newObj.images = this.dnzp.join(',')
				newObj.industryLicenseImg = this.xkz
				uni.request({
					url: `${config.api_base_url}member/merchant_apply/secondTrial/${this.obj.id}`,
					data: newObj,
					method: 'PUT',
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: ((res) => {
						let { status, flag } = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '保存成功'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 777)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '保存失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			}
		},
		onLoad(e) {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '暂无该用户凭证, 请先登录',
					icon: 'none'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			if (e && e.id) {
				this.id = e.id
			}
			if (!this.id) {
				return false
			}
			this._getCurrentPageData()
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}
</style>
<style scoped>
	.merchant-submits-apply {
		padding: 15rpx;
		box-sizing: border-box;

	}

	.merchant-submits-applys {
		background: #fff;
		padding: 10rpx 30rpx 30rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
	}

	.merchant-submits-apply-bottom {}

	.merchant-submits-apply-info {}

	.merchant-submits-apply-info-txt {
		font-size: 30rpx;
		color: #000000;
		line-height: 70rpx;
		font-weight: 600;
		margin-right: 10rpx;

	}

	.merchant-submits-apply-info-input {
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgb(221, 221, 221);
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.merchant-submits-apply-info-input-file {
		overflow: hidden;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.merchant-submits-apply-info-input-file-box {
		width: 288rpx;
		height: 154rpx;
		background: rgba(240, 240, 240, 1);
		border-radius: 12rpx;
		border: 2rpx solid rgba(202, 202, 202, 1);
		float: left;
		margin-right: 34rpx;
		margin-bottom: 25rpx;
		position: relative;
	}

	.up {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
	}

	.up-img {
		width: 100%;
		height: 1000%;
	}

	.up-img-close {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		position: absolute;
		right: 0;
		top: 0;
	}

	.upImg {

		width: 46rpx;
		height: 46rpx;
		background: rgba(151, 151, 151, 1);
		border-radius: 50%;
	}

	.up text {
		font-size: 24rpx;
		color: #999;
		font-weight: 600;
		margin-top: 16rpx;
	}

	.merchant-submits-apply-info-input-one {
		width: 100%;
		height: 40rpx;
		border-bottom: 2rpx solid #EEEEEE;
		padding-bottom: 20rpx;
	}

	.merchant-submits-apply-info-input-one text {
		font-size: 28rpx;
		color: #333;
		margin-top: -14rpx;
		display: block;
	}

	.merchant-submits-apply-info-input-input {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: calc(100% - 60rpx);
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.merchant-submits-apply-info-input-close {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #C6C6C6;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.merchant-submits-apply-btn {
		width: 660rpx;
		height: 82rpx;
		background: rgba(240, 34, 48, 1);
		border-radius: 14rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 82rpx;
		margin: 60rpx auto 60rpx;
	}
</style>
